import React from 'react';
import { Button, Row, Col, Form, DatePicker, Select } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import { SIZE, PAGE } from '@/utils/constant';
import { teacherLeaves } from '@/services/api';

interface UserFormProps extends FormComponentProps {
  dispatch: (value: object) => void;
}

const { Item } = Form;
const { RangePicker } = DatePicker;
const LeavesForm = Form.create<UserFormProps>()(
  ({ form: { getFieldDecorator, getFieldsValue, resetFields }, dispatch }: any) => {
    const formItemLayout = {
      labelCol: {
        xs: { span: 6 },
      },
      wrapperCol: {
        sm: { span: 18 },
      },
    };
    return (
      <Form {...formItemLayout}>
        <Row className="rowMarginTop" gutter={24}>
          <Col span={6}>
            <Item label="申请日期">{getFieldDecorator('between')(<RangePicker />)}</Item>
          </Col>
          <Col span={6}>
            <Item label="状态">
              {getFieldDecorator('status')(
                <Select allowClear placeholder="请选择">
                  <Select.Option value="0">申请中</Select.Option>
                  <Select.Option value="1">已同意</Select.Option>
                  <Select.Option value="2">已拒绝</Select.Option>
                </Select>,
              )}
            </Item>
          </Col>
          <Col span={6}></Col>

          <Col offset={2} span={4}>
            <Button
              type="primary"
              onClick={() => {
                let isGetData = false;
                const formValue: object = getFieldsValue();
                const newFormValue: any = {};
                Object.keys(formValue).forEach((item: any) => {
                  if (formValue[item] || formValue[item] === '') {
                    isGetData = true;
                    if (typeof formValue[item] === 'string') {
                      newFormValue[item] = formValue[item].trim();
                    } else if ((item = 'between')) {
                      newFormValue.between = formValue[item].map((i: any) =>
                        i.format('YYYY-MM-DD'),
                      );
                    } else {
                      newFormValue[item] = formValue[item];
                    }
                  }
                });

                if (isGetData) {
                  dispatch({
                    type: 'OPEN_LOADING',
                  });
                  dispatch({
                    type: 'SEARCH_VALUE',
                    payload: newFormValue,
                  });
                  teacherLeaves({ ...newFormValue, page: PAGE, size: SIZE })
                    .then((res: any) => {
                      if (res.status === 'success') {
                        dispatch({
                          type: 'GET_DATA',
                          payload: res.data.data,
                        });
                        dispatch({
                          type: 'CHANGE_PAGINATION',
                          payload: {
                            current: PAGE,
                            pageSize: SIZE,
                            showSizeChanger: true,
                            total: res.data.meta.total,
                          },
                        });
                      }
                      dispatch({
                        type: 'CLOSED_LOADING',
                      });
                    })
                    .catch(() => {
                      dispatch({
                        type: 'CLOSED_LOADING',
                      });
                    });
                }
              }}
            >
              查询
            </Button>
            <Button
              className="secondBtn"
              onClick={() => {
                resetFields();
                dispatch({
                  type: 'OPEN_LOADING',
                });
                teacherLeaves({ page: PAGE, size: SIZE })
                  .then((res: any) => {
                    if (res.status === 'success') {
                      dispatch({
                        type: 'GET_DATA',
                        payload: res.data.data,
                      });
                      dispatch({
                        type: 'CHANGE_PAGINATION',
                        payload: {
                          current: PAGE,
                          pageSize: SIZE,
                          showSizeChanger: true,
                          total: res.data.meta.total,
                        },
                      });
                      dispatch({
                        type: 'SEARCH_VALUE',
                        payload: {},
                      });
                    }
                    dispatch({
                      type: 'CLOSED_LOADING',
                    });
                  })
                  .catch(() => {
                    dispatch({
                      type: 'CLOSED_LOADING',
                    });
                  });
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    );
  },
);

export default LeavesForm;
